<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      {{ keyDataManagement }}：
      <input type="text" v-model="text" @blur="handleText" />
    </div>
  </div>
</template>

<script>
import langMixin, { lang } from "./../mixin/langMixin";

const key = lang.MAIN_DATAMANAGEMENT;

export default {
  mixins: [langMixin],
  data() {
    return {
      keyDataManagement: key,
      text: "",
    };
  },
  methods: {
    handleText() {
      let oldValue = this.getLang(key);
      if (oldValue !== this.text) {
        this.setLang({
          key,
          value: this.text,
        });
      }
    },
  },
  beforeMount() {
    this.text = this.getLang(key);
  },
};
</script>
